<template>
  <div class="bg-white rounded">
    <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <nuxt-link v-for="item in videos" :key="item.video_id" class="bg-white shadow-md rounded" :to="`./video/details/${item.video_id}`">
        <div class="aspect-ratio-16/9">
          <img :src="item.cover" alt="视频封面" class="w-full h-full object-cover" />
        </div>
        <div class="p-2.5">
          <h2 class="text-sm font-normal line-clamp-2 overflow-hidden text-ellipsis">{{ item.title }}</h2>
        </div>
      </nuxt-link>
    </div>
  </div>
</template>

<script setup>
const videos = ref([]);
const tempImg = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg";
const { data: result } = await useFetch("/api/video/list"); // 获取视频列表
if (result.value) {
  videos.value = result.value.data?.map((video) => ({
    ...video,
    cover: video.cover || tempImg,
  }));
}
</script>
